<template>
    <div class="content-container">
        <div class="sys-header">
            <el-form :inline="true">
                <el-form-item label="字典目录">
                    <el-select v-model="selectDictionary">
                        <el-option v-for="dict in dictionaries" :key="dict.id" :label="dict.title"
                                   :value="dict.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="addDictItem()">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="dictionaryItems" border>
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="title" label="标题"/>
            <el-table-column prop="sequence" label="序号"/>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editDep(row)">编辑
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteDictItem(row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <section class="content-footer">
            <el-pagination
                    @size-change="sizeChangeFn"
                    @current-change="currentChangeFn"
                    background
                    layout="sizes, prev, pager, next, total"
                    :total="total"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
            />
        </section>
        <sys-item-dialog
                :title="dialogTitle"
                :visible="dialogVisible"
                :formData="depForm"
                :sysId="editID"
                :selectDName="selectDictionaryName"
                :selectDictionary="selectDictionary"
                @closeDialog="closeDialog"
        />
    </div>
</template>

<script>
    import {
        getSysDictionariesApi,
        getSysDictionaryItemsApi,
        delSysDictionaryItemsApi
    } from '@/request/api'

    import SysItemDialog from './children/SysItemDialog'

    export default {
        name: "SystemDictionaryItem",
        data() {
            return {
                dictionaries: [],
                selectDictionary: null,
                selectDictionaryName: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dictionaryItems: [],
                dialogTitle: '',
                dialogVisible: false,
                editID: null,
                depForm: {
                    title: '',
                    sequence: '',
                }
            }
        },
        components: {
            SysItemDialog
        },
        watch: {
            selectDictionary(newVal, oldVal) {
                if (newVal) {
                    this.queryDictItems()
                    const isSelect = this.dictionaries.some(dict => {
                        if (dict.id === this.selectDictionary) {
                            this.selectDictionaryName = dict.title
                            return true
                        }
                        return false
                    })
                    !isSelect && (this.selectDictionary = null)
                }
            }
        },
        methods: {
            queryDictItems() {
                getSysDictionaryItemsApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    parentId: this.selectDictionary
                }).then(res => {
                    if (res.success === true) {
                        this.dictionaryItems = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            // 获取部门列表数据
            queryDepData() {
                getSysDictionariesApi({
                    currentPage: 1,
                    pageSize: 1000
                }).then(res => {
                    if (res.success === true) {
                        this.dictionaries = res.data.list
                        this.selectDictionary = +this.$route.query.parentId || null
                        if (!this.selectDictionary && this.dictionaries.length > 0) {
                            this.selectDictionary = this.dictionaries[0].id
                        }
                    }
                })
            },
            sizeChangeFn(val) {
                this.pageSize = val
                this.queryDictItems()
            },
            currentChangeFn(val) {
                this.currentPage = val
                this.queryDictItems()
            },
            deleteDictItem(row) {
                this.$confirm('此操作将删除该数据字典明细，是否继续？', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    delSysDictionaryItemsApi({
                        id: row.id
                    }).then(res => {
                        if (res.success === true) {
                            this.queryDictItems()
                        }
                    })
                }).catch(() => {

                })
            },
            addDictItem() {
                this.dialogTitle = '数据字典明细添加'
                this.dialogVisible = true
            },
            closeDialog(reload) {
                this.dialogVisible = false
                if (reload) {
                    this.queryDictItems()
                }
            },

            // 编辑一条部门数据
            editDep(row) {
                this.dialogTitle = '数据字典明细编辑'
                this.$nextTick(() => {
                    this.depForm = {
                        sequence: row.sequence,
                        title: row.title
                    }
                })
                this.editID = row.id
                this.dialogVisible = true
            },
        },
        created() {
            //
            this.queryDepData()
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    .sys-header {
        margin-bottom: 10px;
    }
</style>